<template>
  <div>
    <h2>示例1</h2>
    <Navbar
        :items="[
      { label: '首页', href: '/' },
      { label: '产品', href: '/products' },
      { label: '关于', href: '/about' }
    ]"
        active-index="0"
        @item-click="handleItemClick"
    />
    <h2>示例2</h2>
    <Navbar
        fixed
        background-color="#2c3e50"
        text-color="#ecf0f1"
        height="80"
        :items="[
      { label: '仪表盘', href: '#', icon: 'fas fa-home' },
      { label: '消息', href: '#', icon: 'fas fa-envelope' },
      { label: '设置', href: '#', icon: 'fas fa-cog' }
    ]"
        alignment="center"
    >
      <template #left>
        <img src="@/assets/logo.svg" alt="Logo" style="height: 40px">
      </template>
    </Navbar>
    <h2>示例3</h2>
    <Navbar
        :breakpoint="640"
        v-model:collapsed="isCollapsed"
        :items="navItems"
        background-color="#fff"
        text-color="#333"
        @collapse-toggle="handleCollapse"
    >
      <template #right>
        <button class="search-button">
          <i class="fas fa-search"></i>
        </button>
      </template>
    </Navbar>
  </div>

</template>

<script setup>
import { ref } from 'vue'
import Navbar from '@/components/Navbar/Navbar.vue'

const handleItemClick = (payload) => {
  console.log('导航项点击:', payload)
  // 实际使用中可以在此处处理路由跳转
}

// 示例3
const isCollapsed = ref(true)
const navItems = ref([
  { label: '博客', href: '/blog' },
  { label: '商店', href: '/shop' },
  { label: '联系', href: '/contact' }
])

const handleCollapse = (collapsed) => {
  console.log('菜单状态:', collapsed ? '已折叠' : '已展开')
}


</script>